<template>
  <div class="createspare-warp">
    <pk-dialog :footer="false" @onClose="onClose" style="width: 420px;">
      <div class="flex-column align-items-center justify-center">
        <div class="createspare-warp-info">
          <div class="createspare-warp-avatar" v-loading="photoLoading">
            <el-avatar :size="104" :src="userInfo.avatar" v-if="userInfo.avatar"/>
            <div class="createspare-warp-avataredit">
              <el-upload
                ref="uploadRef"
                class="upload-demo"
                action="https://api.bytesbay.cn/bolePin/user/uploadPicture"
                :auto-upload="true"
                :show-file-list="false"
                name="filename"
                :headers="updataParam"
                :on-success="onSuccess"
                :on-progress="onProgress"
                :on-error="onError"
              >
              <template #trigger>
                <el-icon :size="20" color="#999">
                  <Edit />
                </el-icon>
              </template> 
            </el-upload>
            </div>
          </div>
          <div class="createspare-warp-fullname mt-12 clamp1">
            <el-input v-model="userInfo.fullname" style="width: 300px" placeholder="请输入名称"></el-input>
          </div>
          <div class="createspare-warp-title mt-12 gray-color6 clamp2">
            <el-input
              v-model="userInfo.title"
              :rows="3"
              type="textarea"
              style="width: 300px"
              placeholder="请输入分身描述"
            />
          </div>
          <div class="createspare-warp-telbox mt-24">
            <div class="createspare-warp-telicon"></div>
            <div class="createspare-warp-phoneicon"></div>
            <div class="f-12 mt-8">通话</div>
          </div>

          <div class="mt-24">
            <el-button type="primary" size="large" @click="updateSpare" :loading="loading">
              <div class="w-100">确认</div>
            </el-button> 
          </div>
        </div>
      </div>
    </pk-dialog>
  </div>
</template>

<script setup>
  import { Edit } from '@element-plus/icons-vue'
  import { onMounted, ref, defineEmits, defineProps, reactive } from 'vue'
  import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
  import { getToken, setKeyItem} from '@/utils/auth'
  import { ElMessage } from 'element-plus'
  const photoLoading = ref(false)
  const updataParam = reactive({
    Token: ""
  })
  const props = defineProps({
    data: {
      type:Object,
      default: () => {}
    },
    loading:{
      type: Boolean,
      default: false
    }
  })
  const userInfo = ref(props.data)
  const emits = defineEmits(['updateSpare', 'onClose'])

  const onClose = () => {
    emits('onClose')
  }

  const onProgress = () => {
    photoLoading.value = true
  }

  const onError = () => {
    photoLoading.value = false
  }

  const onSuccess = (e) => {
    photoLoading.value = false
    userInfo.value.avatar = e.data 
  }

  const updateSpare = () => {
    if (!userInfo.value.avatar) {
      ElMessage('头像没有上传')
      return
    }

    if (!userInfo.value.fullname) {
      ElMessage('名称没有填写')
      return
    }

    if (!userInfo.value.title) {
      ElMessage('分身描述没有填写')
      return
    }
 
    emits('updateSpare', userInfo.value)
  }

  onMounted(() => {
    updataParam.Token = localStorage.getItem('bytesbayToken')
  })
</script>

<style lang="scss" scoped>
.createspare-warp{
  &-info{
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items:center;
  }
  &-avatar{
    width: 104px;
    height: 104px;
    border-radius: 104px;
    background: url("@/assets/usericon.png") center center no-repeat;
    background-size: 104px auto!important; 
    border:#ddd 1px solid;
    position: relative;
  }
  &-fullname{
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-title{
    min-height: 40px;
  }
  &-avataredit{
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
  }

  &-telbox{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: #737a87;
  }
  &-telicon{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/CallWrapper.svg") center center no-repeat;
    background-size: 60px auto; 
  }
  &-phoneicon{
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/Phone.svg") center center no-repeat;
    background-size: 30px auto; 
  }
}

@media screen and (max-width: 500px) {
  .park-dialog{
    width: 90%!important;
  }
  ::v-deep .el-dialog {
    width: 90%!important;
  }
}
</style>